<template>
  <div class="forgetpsd">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="desktop">
      <div class="title">忘记密码</div>
      <div class="fz18 lh62 c999">Forget the password</div>
      <el-form-item prop="mobile">
        <el-input ref="mobile" v-model="ruleForm.mobile" autocomplete="off" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="code" class="codeForm">
        <el-input ref="code" v-model="ruleForm.code" autocomplete="off" placeholder="请输入验证码" />
        <el-button v-show="show" type="primary" @click="getCode('ruleForm')">获取验证码</el-button>
        <el-button v-show="!show" type="info" plain disabled class="w120 c999">{{ count }}s</el-button>
      </el-form-item>
      <el-form-item prop="new_pwd">
        <el-input ref="new_pwd" v-model="ruleForm.new_pwd" type="password" autocomplete="off" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item prop="confirm_new_pwd">
        <el-input ref="confirm_new_pwd" v-model="ruleForm.confirm_new_pwd" type="password" autocomplete="off" placeholder="请确认新密码" />
      </el-form-item>

      <router-link to="./login" class="fr fz14 c999 el-icon-right">登录</router-link>

      <el-button type="primary" class="btn fz16" @click="submitForm('ruleForm')">保 存</el-button>
    </el-form>
  </div>
</template>

<script>
import { sendTpSms, forgetpassword } from '@/api/user';
export default {
  data() {
    const confirmPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.new_pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        mobile: '',
        code: '',
        new_pwd: '',
        confirm_new_pwd: ''
      },
      getBackCode: '',
      rules: {
        mobile: [
          { required: true, message: '请填写手机号', trigger: 'change' },
          {
            pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
            message: '手机号格式不对',
            trigger: 'change'
          }
        ],
        code: [{ required: true, message: '请填写验证码', trigger: 'change' }],
        new_pwd: [
          { required: true, message: '请填写新密码', trigger: 'change' }
        ],
        confirm_new_pwd: [{ validator: confirmPass, trigger: 'change' }]
      },
      show: true,
      count: '',
      timer: null,
      loading: false
    };
  },

  mounted() {},
  methods: {
    async getCode() {
      this.loading = true;
      if (!this.ruleForm.mobile) {
        this.$message({ message: '请填写手机号', type: 'warning' });
        return;
      }
      this.showTime();
      let mobile = this.ruleForm.mobile;
      let scene = 1;
      let { data } = await sendTpSms({ mobile, scene });
      this.getBackCode = data.code;
    },
    showTime() {
    const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
          } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
          }
        }, 1000);
        }
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        this.submitpsd();
      });
    },
    async submitpsd() {
      let { data } = await forgetpassword({ ...this.ruleForm });
        this.$message({
          message: `${data},请重新登录`,
          type: 'success'
        });
         this.$router.push({ path: '/login' });
    }
  }
};
</script>

<style lang="scss" scoped>
$bg: #22467a;
$zoom: 937 / 1080;
.forgetpsd {
  position: relative;
  min-height: 100%;
  width: 100%;
  background: url("../../assets/images/loginBg.png") no-repeat #eee;
  background-size: 100% 100%;
  overflow: hidden;
  .desktop {
    zoom: $zoom;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    max-height: 100vh;
    max-width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 60px 160px;
    box-sizing: border-box;
    .title {
      font-size: 40px;
      line-height: 40px;
      font-weight: bold;
    }
    .codeForm {
      position: relative;
      .el-button {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 4px 4px 0;
      }
    }
    .btn {
      width: 360px;
      height: 50px;
      display: block;
      border-radius: 35px;
      margin: 64px auto 0;
      background: $bg;
    }
    ::v-deep.el-form-item__error {
      font-size: 16px;
    }
  }
}
</style>

